<template>
	<div>
		<el-dialog
			:title="title"
			:visible.sync="visible"
			:close-on-click-modal="false"
			append-to-body
			width="40%"
			:before-close="dialogBeforeClose"
			@closed="handlerClosed"
		>
			<el-form
				ref="form"
				:model="formData"
				:rules="rules"
				label-width="100px"
				:inline="false"
				size="normal"
			>
				<el-form-item label="工作组名称" prop="workName">
					<el-input v-model="formData.workName" clearable />
				</el-form-item>
				<el-form-item label="所属医生" prop="doctorId">
					<el-select v-model="formData.doctorId" placeholder="请选择" clearable>
						<el-option
							v-for="item in checkRowData"
							:key="item.id"
							:label="item.doctorName"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="领衔医生" prop="leadDoctorId">
					<el-select
						v-model="formData.leadDoctorId"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="item in checkRowData"
							:key="item.id"
							:label="item.doctorName"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="工作组介绍" prop="workIntroduce">
					<el-input
						v-model="formData.workIntroduce"
						type="textarea"
						:rows="4"
						clearable
					/>
				</el-form-item>
				<el-form-item label="工作组擅长" prop="workMajor">
					<el-input
						v-model="formData.workMajor"
						type="textarea"
						:rows="4"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" @click="onSubmit">
						确定
					</el-button>
					<el-button size="medium" @click="handlerCancel"> 取消 </el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '',
		},
		checkRowData: {
			type: Array,
			default: () => {
				return []
			},
		},
	},
	data() {
		return {
			orgList: [],
			deptList: [],
			formData: {
				workName: '',
				orgId: '',
				deptId: '',
				doctorId: '',
				leadDoctorId: '',
				workIntroduce: '',
				workMajor: '',
				doctorIds: [],
			},
			rules: {
				workName: [
					{ required: true, message: '请输入工作组名称', trigger: 'blur' },
				],
				doctorId: [
					{ required: true, message: '请输入所属医生名称', trigger: 'blur' },
				],
				leadDoctorId: [
					{ required: true, message: '请输入领衔医生名称', trigger: 'blur' },
				],
				workIntroduce: [
					{ required: true, message: '请输入工作组介绍', trigger: 'blur' },
				],
				workMajor: [
					{ required: true, message: '请输入工作组擅长', trigger: 'blur' },
				],
			},
		}
	},
	computed: {},
	watch: {
		visible(val) {
			if (val) {
				this.formData = {
					workName: '',
					orgId: '',
					deptId: '',
					doctorId: '',
					leadDoctorId: '',
					workIntroduce: '',
					workMajor: '',
					doctorIds: [],
				}
				this.checkRowData.forEach(info => {
					this.formData.doctorIds.push(info.id)
					this.formData.orgId = info.orgId
					this.formData.deptId = info.deptId
				})
			}
		},
	},
	methods: {
		dialogBeforeClose() {
			this.$emit('update:visible', false)
		},
		handlerClosed() {
			this.handlerResetFields()
		},
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.$emit('submit', this.formData)
					this.handlerCancel()
				} else {
					return false
				}
			})
		},
		handlerCancel() {
			this.handlerResetFields()
			this.dialogBeforeClose()
			this.handlerClosed()
		},
		handlerResetFields() {
			this.$nextTick(() => {
				this.$refs['form'].clearValidate()
			})
		},
	},
}
</script>

<style lang="scss" scoped></style>
